// 导航栏交互
document.addEventListener('DOMContentLoaded', function() {
    // 移动端导航菜单切换
    const navToggle = document.querySelector('.nav-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (navToggle && navMenu) {
        navToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            navToggle.classList.toggle('active');
        });
    }
    
    // 平滑滚动到锚点
    const navLinks = document.querySelectorAll('.nav-menu a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            if (targetSection) {
                const offsetTop = targetSection.offsetTop - 80; // 考虑固定导航栏高度
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 滚动时导航栏样式变化
    // 已移除，滚动不再改变导航栏样式
    
    // 购买按钮点击事件
    const buyButtons = document.querySelectorAll('.btn-primary');
    buyButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 这里可以添加购买逻辑，比如跳转到支付页面
            alert('感谢您的关注！购买功能正在开发中...');
        });
    });
    
    // 表单提交处理
    const contactForm = document.querySelector('.contact-form form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            const name = this.querySelector('input[type="text"]').value;
            const email = this.querySelector('input[type="email"]').value;
            const message = this.querySelector('textarea').value;
            
            // 简单的表单验证
            if (!name || !email || !message) {
                alert('请填写所有必填字段！');
                return;
            }
            
            // 模拟表单提交
            alert('消息已发送！我们会尽快回复您。');
            this.reset();
        });
    }
    
    // 滚动动画
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // 观察需要动画的元素
    const animatedElements = document.querySelectorAll('.feature-card, .product-card, .step, .testimonial-card');
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
    
    // 数字计数动画
    function animateNumbers() {
        const numbers = document.querySelectorAll('.price');
        numbers.forEach(number => {
            const target = parseFloat(number.textContent.replace('¥', ''));
            const duration = 2000;
            const step = target / (duration / 16);
            let current = 0;
            
            const timer = setInterval(() => {
                current += step;
                if (current >= target) {
                    current = target;
                    clearInterval(timer);
                }
                number.textContent = '¥' + current.toFixed(1);
            }, 16);
        });
    }
    
    // 当价格区域进入视口时触发动画
    const priceObserver = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateNumbers();
                priceObserver.unobserve(entry.target);
            }
        });
    });
    
    const productsSection = document.querySelector('.products');
    if (productsSection) {
        priceObserver.observe(productsSection);
    }
    
    // 添加鼠标悬停效果
    const cards = document.querySelectorAll('.feature-card, .product-card, .testimonial-card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // 添加加载动画
    window.addEventListener('load', function() {
        document.body.style.opacity = '1';
    });
    
    // 页面加载时的淡入效果
    document.body.style.opacity = '0';
    document.body.style.transition = 'opacity 0.5s ease';
});

// 添加一些额外的交互效果
document.addEventListener('DOMContentLoaded', function() {
    // 为按钮添加点击波纹效果
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
    
    // 添加键盘导航支持
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const navMenu = document.querySelector('.nav-menu');
            if (navMenu && navMenu.classList.contains('active')) {
                navMenu.classList.remove('active');
                document.querySelector('.nav-toggle').classList.remove('active');
            }
        }
    });
    
    // 添加触摸设备支持
    if ('ontouchstart' in window) {
        document.body.classList.add('touch-device');
    }
});

// Tabs标签页切换active
const tabsMenu = document.querySelector('.tabs-menu');
if (tabsMenu) {
    tabsMenu.addEventListener('click', function(e) {
        let li = e.target;
        // 如果点击的是a标签，取父级li
        if (li.tagName === 'A') {
            e.preventDefault(); // 阻止跳转
            li = li.parentElement;
        }
        if (!li.classList.contains('tab-item')) return;
        // 移除所有active
        tabsMenu.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
        li.classList.add('active');
    });
}

// 购物车逻辑
const cartList = document.getElementById('cartList');
const cartTotalPrice = document.getElementById('cartTotalPrice');
let cart = [
    { id: 1, title: '苹果ID账号（美国区）', price: 24.8, qty: 1 }
];

function renderCart() {
    cartList.innerHTML = '';
    if (cart.length === 0) {
        cartList.innerHTML = '<div class="cart-empty">购物车为空</div>';
        cartTotalPrice.textContent = '¥0.00';
        return;
    }
    let total = 0;
    cart.forEach(item => {
        total += item.price * item.qty;
        const div = document.createElement('div');
        div.className = 'cart-item';
        div.innerHTML = `
            <div class="cart-item-info">
                <div class="cart-item-title">${item.title}</div>
            </div>
            <div class="cart-item-qty">
                <button class="cart-item-qty-btn" data-id="${item.id}" data-action="dec">-</button>
                <span class="cart-item-qty-num">${item.qty}</span>
                <button class="cart-item-qty-btn" data-id="${item.id}" data-action="inc">+</button>
            </div>
            <div class="cart-item-price">¥${(item.price * item.qty).toFixed(2)}</div>
            <button class="cart-item-remove" data-id="${item.id}"><i class="fas fa-trash"></i></button>
        `;
        cartList.appendChild(div);
    });
    cartTotalPrice.textContent = '¥' + total.toFixed(2);
}

cartList.addEventListener('click', function(e) {
    const btn = e.target.closest('button');
    if (!btn) return;
    const id = Number(btn.getAttribute('data-id'));
    if (btn.classList.contains('cart-item-qty-btn')) {
        const action = btn.getAttribute('data-action');
        cart = cart.map(item => {
            if (item.id === id) {
                if (action === 'inc') item.qty++;
                if (action === 'dec' && item.qty > 1) item.qty--;
            }
            return item;
        });
        renderCart();
    } else if (btn.classList.contains('cart-item-remove')) {
        cart = cart.filter(item => item.id !== id);
        renderCart();
    }
});

renderCart();

// 左侧类别和地区选择高亮切换
function setupSelectTags(groupId) {
    const group = document.getElementById(groupId);
    if (!group) return;
    group.addEventListener('click', function(e) {
        const tag = e.target.closest('.select-tag');
        if (!tag) return;
        group.querySelectorAll('.select-tag').forEach(t => t.classList.remove('selected'));
        tag.classList.add('selected');
    });
}
setupSelectTags('categoryTags');
setupSelectTags('regionTags');

// 添加CSS样式用于波纹效果
const style = document.createElement('style');
style.textContent = `
    .btn {
        position: relative;
        overflow: hidden;
    }
    
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transform: scale(0);
        animation: ripple-animation 0.6s linear;
        pointer-events: none;
    }
    
    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    
    .touch-device .btn:hover {
        transform: none !important;
    }
    
    .nav-menu.active {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        border-radius: 0 0 15px 15px;
    }
    
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
`;
document.head.appendChild(style); 